<template>
  <div class="all">
    <!--  第一部分-->

    <div class="top">
      <div class="left_list">
        <ul @mouseleave="showlv('')"> <!-- 添加鼠标离开事件监听器 -->
          <li @mouseover="showlv('fj')">
            <img src="../../../../assets/zgr/jingneiyou/10001.png" alt="">
            <h3>福建海南</h3>
            <p>
              <a href="#">厦门</a>
              <a href="#">鼓浪屿</a>
              <a href="#">武夷山</a>
              <a href="#">三亚</a>
            </p>
            <div class="fj" :style="{display: activelv === 'fj' ? 'block' : 'none'}">
              <div style="width: 177px;height: 194px">
                <h2>福建</h2>
                <ul>
                  <li>厦门</li>
                  <li>鼓浪屿</li>
                  <li>福州</li>
                  <li>厦门大学</li>
                  <li>土楼</li>
                  <li>曾厝垵</li>
                  <li>武夷山</li>
                  <li>云水谣</li>
                  <li>菽庄花园</li>
                  <li>日光岩</li>
                  <li>环岛路</li>
                  <li>厦门植物园</li>
                </ul>
              </div>
              <div style="width: 177px;height: 194px">
                <h2>海南</h2>
                <ul>
                  <li>海口</li>
                  <li>三亚</li>
                  <li>蜈支洲</li>
                  <li>南山</li>
                  <li>天涯海角</li>
                  <li>亚龙湾</li>
                  <li>大小洞天</li>
                  <li>亚龙湾天堂森林公园</li>
                  <li>分界洲</li>
                  <li>猴岛</li>
                </ul>
              </div>
            </div>

          </li>

          <li @mouseover="showlv('yg')">
            <img src="../../../../assets/zgr/jingneiyou/10002.png" alt="">
            <h3>云贵川藏</h3>
          <p>
            <a href="#">厦门</a>
            <a href="#">鼓浪屿</a>
            <a href="#">武夷山</a>
            <a href="#">三亚</a>
          </p>
            <div class="yg" :style="{display: activelv === 'yg' ? 'block' : 'none'}">
              <div style="width: 177px;height: 194px">
                <h2>云南</h2>
                <ul>
                  <li style="color:#EDA712;">丽江</li>
                  <li>大理</li>
                  <li>西双版纳</li>
                  <li>香格里拉</li>
                  <li>腾冲</li>
                  <li>泸沽湖</li>
                  <li>大理古城</li>
                  <li>玉龙雪山</li>
                  <li>昆明</li>
                  <li>洱海</li>
                  <li>石林</li>
                  <li>拉市海</li>
                </ul>
              </div>
              <div style="width: 177px;height: 194px">
                <h2>贵州</h2>
                <ul>
                  <li>黄果树瀑布</li>
                  <li>西江千户苗寨</li>
                  <li style="color:#EDA712;">荔波大小七孔</li>
                  <li>镇远</li>
                  <li>梵净山</li>
                  <li>万峰林</li>
                  <li>马岭河峡谷</li>
                  <li>遵义</li>
                  <li>织金洞</li>
                  <li>平塘天眼</li>
                </ul>
              </div>
              <div style="width: 177px;height: 194px">
                <h2>西藏</h2>
                <ul>
                  <li>拉萨</li>
                  <li>布达拉宫</li>
                  <li>林芝</li>
                  <li>珠峰大本营</li>
                  <li>羊卓雍错</li>
                  <li style="color:#EDA712;">纳木错</li>
                  <li>日喀则</li>
                  <li>雅鲁藏布大峡谷</li>
                  <li>巴松错</li>
                </ul>
              </div>
              <div style="width: 177px;height: 194px">
                <h2>重庆</h2>
                <ul>
                  <li style="color:#EDA712;">武隆</li>
                  <li>仙女山</li>
                  <li>长江索道</li>
                  <li>洪崖洞</li>
                  <li>解放碑</li>
                  <li>三峡</li>
                  <li>磁器口</li>
                  <li>大足石刻</li>
                  <li>天坑地缝</li>
                  <li>李子坝</li>
                  <li>奥陶纪</li>
                </ul>
              </div>
              <div style="width: 177px;height: 194px">
                <h2>四川</h2>
                <ul>
                  <li>成都</li>
                  <li style="color:#EDA712;">九寨沟</li>
                  <li>峨眉山</li>
                  <li>乐山</li>
                  <li>青城山</li>
                  <li>都江堰</li>
                  <li>稻城亚丁</li>
                  <li>色达</li>
                  <li>熊猫基地</li>
                  <li>四姑娘山</li>
                  <li>宽窄巷子</li>
                  <li>武侯祠</li>
                </ul>
              </div>
            </div>

          </li>
          <li @mouseover="showlv('lh')">
            <img src="../../../../assets/zgr/jingneiyou/10003.png" alt="">
            <h3>两湖两广</h3>
            <p>
              <a href="#">厦门</a>
              <a href="#">鼓浪屿</a>
              <a href="#">武夷山</a>
              <a href="#">三亚</a>
            </p>
            <div class="lh" :style="{display: activelv === 'lh' ? 'block' : 'none'}">
              <div style="width: 177px;height: 194px">
                <h2>湖南</h2>
                <ul>
                  <li style="color:#EDA712;">张家界</li>
                  <li>天门山</li>
                  <li>大峡谷玻璃栈道</li>
                  <li>长沙</li>
                  <li>凤凰</li>
                  <li>玻璃栈道</li>
                  <li>黄龙洞</li>
                  <li>韶山</li>
                </ul>
              </div>
              <div style="width: 177px;height: 194px">
                <h2>湖北</h2>
                <ul>
                  <li style="color:#EDA712;">湖北</li>
                  <li>武汉</li>
                  <li>宜昌</li>
                  <li>神农架</li>
                  <li>三峡游轮</li>
                  <li>恩施</li>
                  <li>武当山</li>
                </ul>
              </div>
            </div>
          </li>
          <li @mouseover="showlv('zy')">
            <img src="../../../../assets/zgr/jingneiyou/10004.png" alt="">
            <h3>中原西部</h3>
            <p>
              <a href="#">厦门</a>
              <a href="#">鼓浪屿</a>
              <a href="#">武夷山</a>
              <a href="#">三亚</a>
            </p>
            <div class="zy" :style="{display: activelv === 'zy' ? 'block' : 'none'}">
              <div style="width: 177px;height: 194px">
                <h2>陕西</h2>
                <ul>
                  <li style="color:#EDA712;">兵马俑</li>
                  <li>西安</li>
                  <li style="color:#EDA712;">华山</li>
                  <li>法门寺</li>
                  <li>华清池</li>
                  <li>明城墙</li>
                  <li>钟鼓楼</li>
                  <li>大雁塔</li>
                  <li>陕西历史博物馆</li>
                  <li>延安</li>
                  <li>壶口瀑布</li>
                </ul>
              </div>
              <div style="width: 177px;height: 194px">
                <h2>河南</h2>
                <ul>
                  <li>河南</li>
                  <li>少林寺</li>
                  <li style="color:#EDA712;">龙门石窟</li>
                  <li>白马寺</li>
                  <li>包公祠</li>
                  <li>云台山</li>
                  <li>清明上河园</li>
                  <li>郭亮村</li>
                  <li>万仙山</li>
                </ul>
              </div>
            </div>
          </li>
          <li @mouseover="showlv('hb')">
            <img src="../../../../assets/zgr/jingneiyou/10005.png" alt="">
            <h3>华北东北</h3>
            <p>
              <a href="#">厦门</a>
              <a href="#">鼓浪屿</a>
              <a href="#">武夷山</a>
              <a href="#">三亚</a>
            </p>
            <div class="hb" :style="{display: activelv === 'hb' ? 'block' : 'none'}">
              <div style="width: 177px;height: 194px">
                <h2>北京</h2>
                <ul>
                  <li style="color:#EDA712;">北京</li>
                  <li>故宫</li>
                  <li>天安门</li>
                  <li>八达岭长城</li>
                  <li>天坛</li>
                  <li>古北水镇</li>
                  <li>圆明园</li>
                  <li>颐和园</li>
                  <li>毛主席纪念堂</li>
                  <li>恭王府</li>
                  <li>南锣鼓巷</li>
                </ul>
              </div>
              <div style="width: 177px;height: 194px">
                <h2>河北</h2>
                <ul>
                  <li>张家口</li>
                  <li>北戴河</li>
                  <li>坝上</li>
                  <li style="color:#EDA712;">承德</li>
                  <li>坝上草原</li>
                  <li>乌兰布统草原</li>
                  <li>山海关</li>
                  <li>唐山</li>
                  <li>张家口</li>
                  <li>北戴河</li>
                  <li>坝上</li>
                  <li>承德</li>
                  <li>坝上草原</li>
                </ul>
              </div>
              <div style="width: 177px;height: 194px">
                <h2>内蒙古</h2>
                <ul>
                  <li>响沙湾</li>
                  <li>呼伦贝尔</li>
                  <li style="color:#EDA712;">辉腾锡勒</li>
                  <li>呼和浩特</li>
                  <li style="color:#EDA712;">敖鲁古雅</li>
                  <li>乌兰布统</li>
                  <li>阿尔山</li>
                  <li>希拉穆仁</li>
                  <li>敕勒川</li>
                  <li>满洲里</li>
                  <li>鄂尔多斯</li>
                  <li>响沙湾</li>
                </ul>
              </div>
              <div style="width: 177px;height: 194px">
                <h2>山西</h2>
                <ul>
                  <li style="color:#EDA712;">平遥古城</li>
                  <li style="color:#EDA712;">乔家大院</li>
                  <li style="color:#EDA712;">五台山</li>
                  <li>壶口瀑布</li>
                  <li>王家大院</li>
                  <li>云冈石窟</li>
                  <li>雁门关</li>
                  <li>晋祠</li>
                </ul>
              </div>
              <div style="width: 177px;height: 194px">
                <h2>东北</h2>
                <ul>
                  <li>长白山</li>
                  <li>哈尔滨</li>
                  <li>大连</li>
                  <li style="color:#EDA712;">伊春</li>
                  <li>五大连池</li>
                  <li>镜泊湖</li>
                  <li>漠河</li>
                  <li>老虎滩海洋公园</li>
                </ul>
              </div>
            </div>

          </li>
          <li @mouseover="showlv('hd')">
            <img src="../../../../assets/zgr/jingneiyou/10006.png" alt="">
            <h3>华东山东</h3>
            <p>
              <a href="#">厦门</a>
              <a href="#">鼓浪屿</a>
              <a href="#">武夷山</a>
              <a href="#">三亚</a>
            </p>
            <div class="hd" :style="{display: activelv === 'hd' ? 'block' : 'none'}">
              <div style="width: 177px;height: 194px">
                <h2>华东</h2>
                <ul>
                  <li>杭州</li>
                  <li>苏州</li>
                  <li>南京</li>
                  <li style="color:#EDA712;">上海</li>
                  <li style="color:#EDA712;">迪士尼</li>
                  <li>乌镇</li>
                  <li>无锡</li>
                  <li>扬州</li>
                  <li>周庄</li>
                  <li style="color:#EDA712;">西塘</li>
                  <li>西湖</li>
                  <li>夫子庙</li>
                  <li>灵山大佛</li>
                  <li>普陀山</li>
                  <li>宁波</li>
                </ul>
              </div>
              <div style="width: 177px;height: 194px">
                <h2>安徽</h2>
                <ul>
                  <li>黄山</li>
                  <li style="color:#EDA712;">九华山</li>
                  <li>宏村</li>
                  <li>屯溪</li>
                  <li>西递</li>
                </ul>
              </div>
            </div>
          </li>
        </ul>




      </div>
      <!--    轮播-->
      <div class="right">
        <div class="carousel-container">
          <div class="block text-center">
            <el-carousel height="294px" motion-blur>
              <el-carousel-item v-for="(image, index) in imageList" :key="index">
                <img :src="image" alt="carousel-image" style="width:860px; height:294px; object-fit: cover;">
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="right_end">
          <img src="https://pic5.40017.cn/04/002/66/d6/rBTJUl2IgS6ACtxrAAC0utLZKHI690.png" alt="">
          <img src="https://pic5.40017.cn/04/000/66/df/rBTJUl2IgTqACjrhAADFVc0Swo8653.png" alt="">
          <img src="https://pic5.40017.cn/02/000/b4/5b/rBLkCVnODLKASjq3AABCYBQSJdc091.jpg" alt="">
          <img src="https://pic5.40017.cn/i/ori/1oZrdd9miYM.jpg" alt="">
        </div>
      </div>
    </div>

<!--    跟团游-->
    <div style="width: 1180px;height: 659px;margin: 0 auto;margin-top: 40px">
      <div style="width: 207px;height: 659px;float: left">
        <img src="https://img1.40017.cn/cn/csl/guoneiyou/pcindex/gentuanyou.png" alt="">
        <img src="https://pic5.40017.cn/02/001/2b/8f/rBLkCVklVFiAFFiSAAEAADGtzPQ743.jpg" alt="">
      </div>
      <div style="width: 973px;height: 640px;float: right;">
        <div style="width: 973px;height: 36px;border-bottom:3px solid #C0CEFD;margin-top: 28px;margin-bottom: 4px">
            <span  style="display: inline-block;width: 71px;height:36px;background-color: #F3F5FA;border-top: 3px solid #C0CEFD;margin-left: 20px;text-align: center;color: #707DE4">优选</span>
            <span style="float:right;color:#707DE4">更多跟团游</span>
        </div>
        <div style="width: 973px;height: 595px;background-color: #F3F5FA">
          <div class="ull" style="width: 973px;height: 600px;">
            <div style="width: 460px;height:375px;display: inline-block">
              <img src="https://pic5.40017.cn/i/ori/1A510mOO0b6_458x302_00.png" alt="">
              <div style="width: 458px;height: 64px;position: relative;margin-top: -69px;background-color: #45577E">
                <p style="padding:10px 18px;font-size: 16px;color:white;background-color: #45577E;width: 418px;height: 44px;">西安 + 华山 + 兵马俑 + 华清宫 + 大雁塔 + 西安博物院 + 西安千古情 5 天 4 晚跟团游 20 人精致小团｜大小同赠送 298 元西安.</p>
              </div>
              <div style="width:458px;height:71px">
                <div style="display: inline-block;margin-left: 10px">
                  <span style="font-size: 34px;color: #FF6633">￥3219</span>
                  <span style="color: #A7A7A7">起</span>
                </div>
                <div style="width: 87px;height:40px;background-color: #F2F2F2;display: inline-block;margin-left: 70px">
                  <span style="color:#ff8056;font-size: 12px;font-family: normal">100%满意度</span>
                  <span style="color:#A7A7A7;font-size: 12px">143人购买</span>
                </div>
                <span style="float: right;margin-top: 20px;font-size: 13px;color:#A7A7A7 ">烟台出发</span>
              </div>
            </div>
            <div class="si" style="width: 460px;height:385px;display: inline-block" >
              <ul>
              <li style="width: 218px;height: 178px;border: 1px solid #E6E6E6">
                <img src="https://pic5.40017.cn/i/ori/1phshAyySCA_458x302_00.jpg" alt=""style="width: 218px;height:107px">
                <div style="width:210px;height:80px;display: inline-block;">
                  <p style="width: 218px;height: 32px;font-size: 14px;margin-left: 3px">潮州 + 汕头 + 汕头小公园 + 南澳岛 + 潮州古城 + 陈慈黉故居 5 天...</p>
                  <div style="display: inline-block;width: 218px">
                    <span style="font-size: 12px;margin-left: 3px">上海出发</span>
                    <span style="font-weight:400;font-size: 22px;color: #FF6633;margin-left: 78px;">￥2322</span>
                    <span style="color: #A7A7A7">起</span>
                  </div>
                </div>
              </li>
              <li style="width: 218px;height: 178px;border: 1px solid #E6E6E6">
                <img src="https://pic5.40017.cn/i/ori/1B4GI2guImI_458x302_00.jpg" alt=""style="width: 218px;height:107px">
                <div style="width:210px;height:80px;display: inline-block;">
                  <p style="width: 218px;height: 32px;font-size: 14px;margin-left: 3px">北京 + 升旗仪式 + 故宫 + 天坛 + 颐和园 + 圆明园 + 八达岭长城 5 天...</p>
                  <div style="display: inline-block;width: 218px">
                    <span style="font-size: 12px;margin-left: 3px">北京出发</span>
                    <span style="font-weight:400;font-size: 22px;color: #FF6633;margin-left: 78px;">￥1233</span>
                    <span style="color: #A7A7A7">起</span>
                  </div>
                </div>
              </li>
              <li style="width: 218px;height: 178px;border: 1px solid #E6E6E6">
                <img src="https://pic5.40017.cn/i/ori/1AT94xerx0k_458x302_00.jpg" alt=""style="width: 218px;height:107px">
                <div style="width:210px;height:80px;display: inline-block;">
                  <p style="width: 218px;height: 32px;font-size: 14px;margin-left: 3px">贵阳 + 安顺 + 荔波 + 黔东南 + 铜仁 + 黄果树 + 西江苗寨 + 梵净山 +... </p>
                  <div style="display: inline-block;width: 218px">
                    <span style="font-size: 12px;margin-left: 3px">菏泽出发</span>
                    <span style="font-weight:400;font-size: 22px;color: #FF6633;margin-left: 78px;">￥3123</span>
                    <span style="color: #A7A7A7">起</span>
                  </div>
                </div>
              </li>
              <li style="width: 218px;height: 178px;border: 1px solid #E6E6E6">
                <img src="https://pic5.40017.cn/i/ori/1yS1cUoojyU_458x302_00.jpg" alt=""style="width: 218px;height:107px">
                <div style="width:210px;height:80px;display: inline-block;">
                  <p style="width: 218px;height: 32px;font-size: 14px;margin-left: 3px">昆明 + 大理 + 丽江 + 石林 + 洱海 + 理想邦 + 玉龙雪山 + 蓝月谷 6... </p>
                  <div style="display: inline-block;width: 218px">
                    <span style="font-size: 12px;margin-left: 3px">杭州出发</span>
                    <span style="font-weight:400;font-size: 22px;color: #FF6633;margin-left: 78px;">￥1123</span>
                    <span style="color: #A7A7A7">起</span>
                  </div>
                </div>
              </li>
              </ul>
            </div>
            <ul class="wu">
            <li style="width: 218px;height: 178px;border: 1px solid #E6E6E6">
              <img src="https://pic5.40017.cn/i/ori/1yRhqSBEiPe_458x302_00.jpg" alt=""style="width: 218px;height:107px">
              <div style="width:210px;height:80px;display: inline-block;">
                <p style="width: 218px;height: 32px;font-size: 14px;margin-left: 3px">三亚 + 亚特兰蒂斯 + 蜈支洲岛 + 游艇出海 + 亚龙湾潜水 + 海昌... </p>
                <div style="display: inline-block;width: 218px">
                  <span style="font-size: 12px;margin-left: 3px">天津出发</span>
                  <span style="font-weight:400;font-size: 22px;color: #FF6633;margin-left: 78px;">￥1239</span>
                  <span style="color: #A7A7A7">起</span>
                </div>
              </div>
            </li>
            <li style="width: 218px;height: 178px;border: 1px solid #E6E6E6">
              <img src="https://pic5.40017.cn/i/ori/1yQF7e2V10A_458x302_00.jpg" alt=""style="width: 218px;height:107px">
              <div style="width:210px;height:80px;display: inline-block;">
                <p style="width: 218px;height: 32px;font-size: 14px;margin-left: 3px">长沙 + 张家界大峡谷玻璃桥 + 天门山 + 芙蓉镇 + 凤凰古城 + 魅力...</p>
                <div style="display: inline-block;width: 218px">
                  <span style="font-size: 12px;margin-left: 3px">北京出发</span>
                  <span style="font-weight:400;font-size: 22px;color: #FF6633;margin-left: 78px;">￥3211</span>
                  <span style="color: #A7A7A7">起</span>
                </div>
              </div>
            </li>
            <li style="width: 218px;height: 178px;border: 1px solid #E6E6E6">
              <img src="https://pic5.40017.cn/i/ori/1wxm0KKQCNa_458x302_00.jpg" alt=""style="width: 218px;height:107px">
              <div style="width:210px;height:80px;display: inline-block;">
                <p style="width: 218px;height: 32px;font-size: 14px;margin-left: 3px">三亚 + 蜈支洲 + 南山 + 呀诺达 + 亚特兰蒂斯水世界 + 游艇出海 +...</p>
                <div style="display: inline-block;width: 218px">
                  <span style="font-size: 12px;margin-left: 3px">广州出发</span>
                  <span style="font-weight:400;font-size: 22px;color: #FF6633;margin-left: 78px;">￥1233</span>
                  <span style="color: #A7A7A7">起</span>
                </div>
              </div>
            </li>
            <li style="width: 218px;height: 178px;border: 1px solid #E6E6E6">
              <img src="https://pic5.40017.cn/i/ori/1yQn45p0lWM_458x302_00.jpg" alt=""style="width: 218px;height:107px">
              <div style="width:210px;height:80px;display: inline-block;">
                <p style="width: 218px;height: 32px;font-size: 14px;margin-left: 3px">阳朔 + 桂林 + 龙脊梯田 + 漓江四星船 5 天 4 晚跟团游 </p>
                <div style="display: inline-block;width: 218px">
                  <span style="font-size: 12px;margin-left: 3px">济南出发</span>
                  <span style="font-weight:400;font-size: 22px;color: #FF6633;margin-left: 78px;">￥2221</span>
                  <span style="color: #A7A7A7">起</span>
                </div>
              </div>
            </li>
            </ul>
        </div>
      </div>
    </div>
</div>

<!--    自由行-->
    <div style="width: 1180px;height: 650px;margin: 0 auto;margin-top: 40px">
      <div style="width: 207px;height: 660px;float: left">
        <img src="https://img1.40017.cn/cn/csl/guoneiyou/pcindex/ziyouxing.png" alt="">
        <img src="https://pic5.40017.cn/02/000/2b/9c/rBANDFklVd6AI79vAAEAAGpRcLs429.jpg" alt="">
      </div>
      <div style="width: 973px;height: 640px;float: right;">
        <div style="width: 973px;height: 36px;border-bottom:3px solid  #32CED4;margin-top: 28px;margin-bottom: 4px">
          <span  style="display: inline-block;width: 71px;height:36px;background-color: #F3F5FA;border-top: 3px solid #32CED4;margin-left: 20px;text-align: center;color:#32CED4">优选</span>
          <span style="float:right;color: #32CED4">更多跟团游</span>
        </div>
        <div style="width: 973px;height: 595px;background-color: #F3F5FA">
          <div class="ull" style="width: 973px;height: 600px;">
            <div style="width: 460px;height:375px;display: inline-block">
              <img src="https://pic5.40017.cn/i/ori/1wxmfGh6Psc_458x302_00.jpg" alt="">
              <div style="width: 458px;height: 64px;position: relative;margin-top: -69px;background-color: #45577E">
                <p style="padding:10px 18px;font-size: 16px;color:white;background-color: #45577E;width: 418px;height: 44px;">三亚 + 三亚湾 + 大东海 + 亚龙湾 + 海棠湾区域酒店自由选择 4-10 天自由行【1 家酒店连住 or 双湾可选 / 4 钻任选 / 天数随.</p>
              </div>
              <div style="width:458px;height:71px">
                <div style="display: inline-block;margin-left: 10px">
                  <span style="font-size: 34px;color: #FF6633">￥3232</span>
                  <span style="color: #A7A7A7">起</span>
                </div>
                <div style="width: 87px;height:40px;background-color: #F2F2F2;display: inline-block;margin-left: 70px">
                  <span style="color:#ff8056;font-size: 12px;font-family: normal">100%满意度</span>
                  <span style="color:#A7A7A7;font-size: 12px">143人购买</span>
                </div>
                <span style="float: right;margin-top: 20px;font-size: 13px;color:#A7A7A7 ">青岛出发</span>
              </div>
            </div>
            <div class="si" style="width: 460px;height:385px;display: inline-block" >
              <ul>
                <li style="width: 218px;height: 178px;border: 1px solid #E6E6E6">
                  <img src="https://pic5.40017.cn/i/ori/1yQL603MFfa_458x302_00.jpg" alt=""style="width: 218px;height:107px">
                  <div style="width:210px;height:80px;display: inline-block;">
                    <p style="width: 218px;height: 32px;font-size: 14px;margin-left: 3px">丽江 + 大理州 + 包车 5 天 4 晚自由行 </p>
                    <div style="display: inline-block;width: 218px">
                      <span style="font-size: 12px;margin-left: 3px">上海出发</span>
                      <span style="font-weight:400;font-size: 22px;color: #FF6633;margin-left: 78px;">￥3111</span>
                      <span style="color: #A7A7A7">起</span>
                    </div>
                  </div>
                </li>
                <li style="width: 218px;height: 178px;border: 1px solid #E6E6E6">
                  <img src="https://pic5.40017.cn/01/001/c5/41/rBANC1uM1amAJPt5AAHVaGgrMa0039_458x302_00.jpg" alt=""style="width: 218px;height:107px">
                  <div style="width:210px;height:80px;display: inline-block;">
                    <p style="width: 218px;height: 32px;font-size: 14px;margin-left: 3px">成都 + 重庆 9 天 8 晚自由行</p>
                    <div style="display: inline-block;width: 218px">
                      <span style="font-size: 12px;margin-left: 3px">重庆出发</span>
                      <span style="font-weight:400;font-size: 22px;color: #FF6633;margin-left: 78px;">￥1112</span>
                      <span style="color: #A7A7A7">起</span>
                    </div>
                  </div>
                </li>
                <li style="width: 218px;height: 178px;border: 1px solid #E6E6E6">
                  <img src="https://pic5.40017.cn/i/ori/ed500-YPU8abiRX2_458x302_00.jpg" alt=""style="width: 218px;height:107px">
                  <div style="width:210px;height:80px;display: inline-block;">
                    <p style="width: 218px;height: 32px;font-size: 14px;margin-left: 3px">广州长隆熊猫酒店 + 长隆飞鸟乐园 + 欢乐世界 + 长隆野生动物...</p>
                    <div style="display: inline-block;width: 218px">
                      <span style="font-size: 12px;margin-left: 3px">重庆出发</span>
                      <span style="font-weight:400;font-size: 22px;color: #FF6633;margin-left: 78px;">￥1111</span>
                      <span style="color: #A7A7A7">起</span>
                    </div>
                  </div>
                </li>
                <li style="width: 218px;height: 178px;border: 1px solid #E6E6E6">
                  <img src="https://pic5.40017.cn/i/ori/1cMoSFEBNew_458x302_00.jpg" alt=""style="width: 218px;height:107px">
                  <div style="width:210px;height:80px;display: inline-block;">
                    <p style="width: 218px;height: 32px;font-size: 14px;margin-left: 3px">三亚 + 三亚丽禾温德姆酒店 5 天 4 晚自由行 </p>
                    <div style="display: inline-block;width: 218px">
                      <span style="font-size: 12px;margin-left: 3px">海南出发</span>
                      <span style="font-weight:400;font-size: 22px;color: #FF6633;margin-left: 78px;">￥2222</span>
                      <span style="color: #A7A7A7">起</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <ul class="wu">
              <li style="width: 218px;height: 178px;border: 1px solid #E6E6E6">
                <img src="https://pic5.40017.cn/02/001/bb/f6/rBLkCVrkIDaAN0IUAAHMwst1ie8785_458x302_00.jpg" alt=""style="width: 218px;height:107px">
                <div style="width:210px;height:80px;display: inline-block;">
                  <p style="width: 218px;height: 32px;font-size: 14px;margin-left: 3px">重庆 + 长江索道 + 轻轨穿楼 + 洪崖洞 + 磁器口古镇</p>
                  <div style="display: inline-block;width: 218px">
                    <span style="font-size: 12px;margin-left: 3px">济南出发</span>
                    <span style="font-weight:400;font-size: 22px;color: #FF6633;margin-left: 78px;">￥1123</span>
                    <span style="color: #A7A7A7">起</span>
                  </div>
                </div>
              </li>
              <li style="width: 218px;height: 178px;border: 1px solid #E6E6E6">
                <img src="https://pic5.40017.cn/i/ori/1yRclkQdt3W_458x302_00.jpg" alt=""style="width: 218px;height:107px">
                <div style="width:210px;height:80px;display: inline-block;">
                  <p style="width: 218px;height: 32px;font-size: 14px;margin-left: 3px">哈尔滨 + 中央大街 + 索菲亚教堂 3-6 天自由行 .</p>
                  <div style="display: inline-block;width: 218px">
                    <span style="font-size: 12px;margin-left: 3px">杭州出发</span>
                    <span style="font-weight:400;font-size: 22px;color: #FF6633;margin-left: 78px;">￥1231</span>
                    <span style="color: #A7A7A7">起</span>
                  </div>
                </div>
              </li>
              <li style="width: 218px;height: 178px;border: 1px solid #E6E6E6">
                <img src="https://pic5.40017.cn/i/ori/1z2HzrcIg24_458x302_00.jpg" alt=""style="width: 218px;height:107px">
                <div style="width:210px;height:80px;display: inline-block;">
                  <p style="width: 218px;height: 32px;font-size: 14px;margin-left: 3px">北海 + 涠洲岛温德姆度假酒店园林房 + 北海银滩皇冠假日酒店高...</p>
                  <div style="display: inline-block;width: 218px">
                    <span style="font-size: 12px;margin-left: 3px">尔滨出发</span>
                    <span style="font-weight:400;font-size: 22px;color: #FF6633;margin-left: 78px;">￥3121</span>
                    <span style="color: #A7A7A7">起</span>
                  </div>
                </div>
              </li>
              <li style="width: 218px;height: 178px;border: 1px solid #E6E6E6">
                <img src="https://pic4.40017.cn/gny/line/2017/02/15/15/xPcjoZ_458x302_00.jpg" alt=""style="width: 218px;height:107px">
                <div style="width:210px;height:80px;display: inline-block;">
                  <p style="width: 218px;height: 32px;font-size: 14px;margin-left: 3px">三亚哈曼度假酒店（无边泳池）4-6 天自由行 </p>
                  <div style="display: inline-block;width: 218px">
                    <span style="font-size: 12px;margin-left: 3px">龙江出发</span>
                    <span style="font-weight:400;font-size: 22px;color: #FF6633;margin-left: 78px;">￥1112</span>
                    <span style="color: #A7A7A7">起</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

<!--    主题游-->
    <div style="width: 1180px;height: 213px;margin: 0 auto;margin-top: 20px">
      <h1>
        <img src="https://img1.40017.cn/cn/csl/guoneiyou/pcindex/zhutiyou.png" alt="">
      </h1>

      <ul class="zty">
        <li><a href=""><img src="https://file.40017.cn/hubble/gnypc/img/index-theme-1-a708987882.png" alt=""></a></li>
        <li><a href=""><img src="https://file.40017.cn/hubble/gnypc/img/index-theme-2-b5f3ecaa57.png" alt=""></a></li>
        <li><a href=""><img src="https://file.40017.cn/hubble/gnypc/img/index-theme-3-95a0b8b3fb.png" alt=""></a></li>
        <li><a href=""><img src="https://file.40017.cn/hubble/gnypc/img/index-theme-4-7832f35811.png" alt=""></a></li>
        <li><a href=""><img src="https://file.40017.cn/hubble/gnypc/img/index-theme-5-faf9b6f4ae.png" alt=""></a></li>
        <li><a href=""><img src="https://file.40017.cn/hubble/gnypc/img/index-theme-6-28ebbb337e.png" alt=""></a></li>
      </ul>
    </div>
<!--常见问题-->
    <div style="border:1px solid rgba(173,187,208,0.98) ;width: 1180px;height: 113px;margin: 0 auto;margin-top: 20px">
      <p style="margin-left: 52px;color: #6b778c;margin-top: 20px">常见问题</p>
      <ul class="cjwt">
        <li>单房差是什么？</li>
        <li>跟团游跟自由行的区别？</li>
        <li>双飞，双卧是什么意思？</li>
        <li>出游通知在哪里</li>
      </ul>
    </div>
<!--    钻石说明-->
    <div style="width: 1180px;height: 124px;margin: 0 auto;margin-top: 30px;margin-bottom: 20px">
      <img src="../../../../assets/zgr/钻石.png" alt="">
    </div>
  </div>
</template>

<script  setup>
import { ref } from 'vue';
import { ElCarousel, ElCarouselItem } from 'element-plus';
import image1 from '../../../../assets/zgr/jingneiyou/lunbo.jpg';
import image2 from '../../../../assets/zgr/jingneiyou/lunbo.jpg';

const imageList = ref([
  image1,
  image2
]);
// 定义当前激活的城市
const activelv = ref('');

// 显示对应城市的函数
const showlv = (lv) => {
  activelv.value = lv;
};
</script>

<style scoped>
.cjwt{
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}
.cjwt li{
  display: inline-block;
  font-size: 14px;
  color: #6b778c;
  font-family: normal;
}
.cjwt li:hover{
  color: #EDA712;
}

.zty{
  display: flex;
  justify-content: space-around;
}
.zty li{
  display: inline-block;
}
.wu li{
  display: inline-block;
  margin-right: 18px;
}
.si ul li{
  display: inline-block;
  margin-right: 12px;
}
.ull {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* 使元素在水平方向上均匀分布 */
  align-items: stretch; /* 使元素在垂直方向上拉伸以填满容器 */
  width: 973px;
  height: 600px;
  margin: 0;
  padding: 0;
  list-style-type: none; /* 去掉列表默认的项目符号 */
}

.ull li {
  box-sizing: border-box; /* 让 padding 和 border 不影响元素宽度 */
  border: 1px solid #E6E6E6;
  margin-bottom: 10px; /* 根据需要设置元素之间的垂直间距 */
}
.left_list>ul>li>p{
  margin-left: 68px;
}
.left_list>ul>li>p>a{
  font-size: 14px;
  color: rgba(173, 187, 208, 0.98);
  text-decoration: none;
  margin-right: 5px;
}
.left_list>ul>li>p>a:hover{
  color: #EDA712;
}
.left_list>ul>li>img{
  float: left;
  margin-top: 16px;
  margin-left: 29px;
}
.left_list>ul>li>h3{
  margin-left: 16px;
  margin-top: 10px;
  display: inline-block;
  color: white;
}
.left_list>ul>li:hover h3{
  color: #565B71;
}
.fj div,
.lh div,
.zy div,
.hd div,
.yg div,
.hb div{
  display: inline-block;
  padding: 20px;
}
.fj div ul li,
.lh div ul li,
.zy div ul li,
.hd div ul li,
.yg div ul li,
.hb div ul li{
  display: inline-block;
  margin-right: 6px;
  font-size: 14px;
  color: #6b778c;
  font-family: normal;
}
.hb div ul li{
}
h2{
  color: #565B71 ;
  border-bottom:1px solid #9ca3b2;
}

.all {
  width: 1180px;
  margin: 0 auto;
}

.top {
  display: flex;
  justify-content: space-between;
  width: 1180px;
  height: 472px;
}

.left_list {
  width: 300px;
  height: 472px;
  background-color: red;
  display: inline-block;
}

.left_list > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.left_list > ul>li {
  width: 300px;
  height: 78px;
  background-color: #565B71;
  list-style-type: none;
  border-top: 1px dashed black;
}

.left_list > ul li:hover {
  background-color: white;
}
.fj{
  top: -61px;
}
.yg{
  top: -140px;
}
.lh{
  top: -219px;
}
.zy{
  top: -299px;
}
.hd{
  top: -457px;
}
.hb{
  top: -378px;
}
.fj,
.lh,
.zy,
.hd {
  width: 255px;
  height: 473px;
  background-color: white;
  position: relative;
  left: 300px;

  z-index: 1000;
  border-top: 1px solid #565B71;
  border-right:1px solid #565B71 ;
  border-bottom: 1px solid #565B71;
}
.yg,.hb{
  width: 670px;
  height: 473px;
  background-color: white;
  position: relative;
  left: 300px;

  z-index: 1000;
  border-top: 1px solid #565B71;
  border-right:1px solid #565B71 ;
  border-bottom: 1px solid #565B71;

}
.right {
  width: 860px;
  height: 472px;
  display: inline-block;
}

.carousel-container {
  width: 860px;
  height: 294px;
}

.right_end {
  width: 860px;
  height: 175px;
  padding-top: 20px;
}

.el-carousel__item {
  width: 860px;
  height: 294px;
}

/* 为图片添加样式，确保图片正常显示 */
.el-carousel__item img {
  display: block;
}
</style>